<template>
	<scroll-view class="collection_scroll" scroll-y @scrolltolower="scrollTolower">
		<view class="scroll_box">
			<view class="item" v-for="index in 9" :key="index" @click="toNft">
				<image class="nft_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix" />
				<view class="nft_name">藏品名称</view>
				<view class="nft_tags">
					<view class="tag">发行999999</view>
					<view class="tag">流通999999</view>
					<view class="tag">成交999999</view>
				</view>
				<view class="nft_price">
					<view v-if="!yqPrice" class="rmb"> <text class="unit">￥</text>365.26</view>
					<view v-else class="yq">456465<text class="unit"> 元气</text> </view>
					<view class="yoy">+100%</view>
				</view>
			</view>
		</view>
		<view v-if="last" class="last">-- 没有更多 --</view>
	</scroll-view>
</template>
<script>
export default {
	props: {
		selection: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data() {
		return {
			nfts: [
				{
					image: "http://qiniu.relaverse.cn/icon/nft_placeholder.png",
					name: "NFT Name",
					price: "365.25",
					yq: "60000",
					user: {
						icon: "@/static/img/avatar.png",
						name: "user name",
					},
				},
			],

			last: true,
		};
	},

	computed: {
		yqPrice() {
			return this.selection?.currency === 2;
		},
	},

	methods: {
		scrollTolower() {},

		toNft() {
			uni.navigateTo({
				url: "/pages/market/nftCollection",
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.collection_scroll {
	width: 100%;
	height: 100%;

	.scroll_box {
		width: 100%;
		padding-top: 10rpx;

		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;

		color: black;

		.item {
			width: 48%;
			height: max-content;

			.nft_image {
				width: 100%;
				border-radius: 30rpx;
			}

			.nft_name {
				margin-top: 10rpx;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 32rpx;
			}

			.nft_tags {
				width: 100%;
				height: 30rpx;
				margin-top: 8rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.tag {
					width: 32%;
					height: 100%;
					border: 1rpx solid #999999;

					font-size: 16rpx;
					line-height: 30rpx;
					color: #999999;
					border-radius: 40rpx;
					text-align: center;
				}
			}

			.nft_price {
				margin-top: 8rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.unit {
					font-size: 28rpx;
				}

				.rmb,
				.yq {
					font-size: 40rpx;
					line-height: 50rpx;
					font-weight: bold;
				}

				.yoy {
					margin-left: auto;
					font-size: 24rpx;
					color: #ff5a5a;
					font-weight: bold;
				}
			}
		}

		.item:nth-child(2n) {
			margin-left: auto;
		}

		.item:nth-child(n + 3) {
			margin-top: 28rpx;
		}
	}

	.last {
		margin: 20rpx auto;
		color: #a9a7a7;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
	}
}
</style>
